<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>登录-#(SiteInfo.siteName)</title>
	<link rel="icon" href="#(ctx)/static/cms/img/cms.ico" type="image/x-icon" />
	<link rel="shortcut icon" href="#(ctx)/static/cms/img/cms.ico" />
	<link rel="Bookmark" href="#(ctx)/static/cms/img/cms.ico" />
	<link href="#(ctx)/static/common/pintuer/pintuer.css" rel="stylesheet">
	<script src="#(ctx)/static/common/layui/layui.js"></script>
    <style type="text/css">
    	body{
    		background-image: url(#(ctx)/static/cms/img/bg01.jpg);
    		background-repeat: round;
    	}
    	#form-div{
    		width: 450px;
    		text-align: left;
    		/*下面这几个代码是为了实现居中*/
    		position: absolute;
    		top: 50%;
    		margin-top: -160px;
    		left: 50%;
    		margin-left: -225px;
    	}
    </style>
    <script>
    	var $ = layui.$;//使用layui内置的jQuery
    	//更新验证码
	    function updateCaptcha() {
			$("#captcha").attr("src", "#(ctx)/cmsLogin/createCaptcha?v=" + Math.random());
			$("#captcha").val("");
		}
	    
    	//登录方法
	    function doLogin(){
	    	var $form = $("#loginForm");
	    	var action = $form.attr("action");
	    	//通过post提交表单
	    	$.post(action,$form.serialize(),function(data){
	    		if("ok" == data.state){
	    			//登录校验通过跳转页面
	    			window.location.href = data.url;
	    		}else{
	    			//登录校验失败，返回后台验证信息
	    			layer.msg(data.msg,{icon: 0});//0是感叹号图标，1是对号图标，2是叉号图标
	    			updateCaptcha();
	    		}
	    	});
	    }
	    
	    $(function(){
	    	//监听enter按键的按下事件
    		$(document).keydown(function(event){
    	    	if(event.keyCode == 13 || event.keyCode == 108){
    	    		doLogin();
    	    	}
    	    });
    	});
    </script>
</head>
<body>
	<div align="center">
		<form id="loginForm" action="#(ctx)/cmsLogin/doLogin" method="post">
			<div id="form-div" class="panel padding bg box-shadow">
				<div class="text-center">
					<br/>
					<h2 class="text-main"><strong>#(SiteInfo.siteName)</strong></h2>
				</div>
				<div class="" style="padding:30px;">
					<div class="form-group">
						<div class="field field-icon-right">
							<input type="text" class="input" name="name" placeholder="登录账号" />
							<span class="icon icon-user"></span>
						</div>
					</div>
					<div class="form-group">
						<div class="field field-icon-right">
							<input type="password" class="input" name="password" placeholder="登录密码" />
							<span class="icon icon-key"></span>
						</div>
					</div>
					<div class="form-group">
						<div class="field">
							<input type="text" class="input input-auto" name="captchaInput" size="36" placeholder="填写右侧的验证码" />
							<img id="captcha" title="点击刷新" src="#(ctx)/cmsLogin/createCaptcha" onclick="updateCaptcha();" width="80" height="32" />
						</div>
					</div>
					<div class="form-group">
						<div class="field">
							<button type="button" id="submitBtn" class="button button-block bg-main text-big" onclick="doLogin();">立即登录</button>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</body>
</html>